<template>
  <component
    :is="menuComponent"
    v-if="!item.hidden && isShow"
    :item-or-menu="itemOrMenu"
  >
    <template v-if="item.children && item.children.length">
      <el-scrollbar
        v-if="
          (layout === 'horizontal' && item.children.length > 18) ||
          (layout !== 'horizontal' && collapse && item.children.length > 18)
        "
        style="height: 86vh"
      >
        <vab-menu
          v-for="route in item.children"
          :key="route.path"
          :item="route"
        />
      </el-scrollbar>
      <template v-else>
        <vab-menu
          v-for="route in item.children"
          :key="route.path"
          :item="route"
        />
      </template>
    </template>
  </component>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { getUserRoles } from '@/api/user'

  export default {
    name: 'VabMenu',
    props: {
      item: {
        type: Object,
        required: true,
      },
      layout: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        itemOrMenu: this.item,
        menuComponent: 'MenuItem',
        isShow: true,
      }
    },
    computed: {
      ...mapGetters({
        collapse: 'settings/collapse',
      }),
    },
    created() {
      this.init()
    },
    methods: {
      async init() {
        // let user = JSON.parse(localStorage.getItem('staticUserInfo'))
        // const a = await getUserRoles({
        //   role_id: user.role_id,
        // })
        // console.log(a.data)
        // for (let item of a.data) {
        //   if (item.name == this.item.meta.title && item.default == 2) {
        //     this.isShow = true
        //   }
        //   console.log(item.next.length)
        //   if (item.next.length) {
        //     console.log(item.next)
        //     for (let it of item.next) {
        //       console.log(it)
        //       if (it.name == this.item.meta.title && it.default == 1) {
        //         this.isShow = true
        //       }
        //     }
        //   }
        // }
        const showChildren = this.handleChildren(this.item.children)
        if (showChildren.length) {
          if (showChildren.length === 1 && this.item.alwaysShow !== true)
            this.itemOrMenu = this.item.children[0]
          else this.menuComponent = 'Submenu'
        }
      },
      handleChildren(children = []) {
        if (!children) return []
        return children.filter((item) => {
          return item.hidden !== true
        })
      },
    },
  }
</script>
